<template>
    <!-- 竖向柱状图 -->
    <div class="comp" ref="vertical">
    </div>
</template>

<script  setup>
// 1.引入基础模块（echarts api）
import { inject, ref, onMounted, onBeforeUnmount } from "vue"
import themeStore from "../store/index.js"
const store = themeStore()
const echarts = inject('echarts')
const api = inject('api')

// 2.初始化页面数据
let vertical = ref(null)//初始化图表容器ref值
let echartsInstance = null//初始化echarts实例对象
let allData = []//初始化业务数据
// react redux
store.$subscribe((mutation, state) => {
    echartsInstance.dispose()// 清除旧的echarts实例
    initEcharts()//创建新实例
    editEcharts()//根据数据继续完善
    // window.addEventListener('resize', Adaptation)//开启窗口变化监听
    Adaptation()
})
function initEcharts() {
    echartsInstance = echarts.init(vertical.value,store.themeName)
    let initOptions = {
        title: {
            text: "▍全国各地区种植收成情况",
            top: '3%',
            left: "3%"
        },
        grid: {
            show: false,
            top: "12%",
            left: "3%",
            right: "3%",
            bottom: "3%",
            containLabel: true
        },
        // 配置提示语
        tooltip: {
            show: true,
            trigger: "axis",
            axisPointer: {
                type: "shadow"
            }
        },
        xAxis: {
            type: "category",
        },
        yAxis: {
            type: "value"
        },
        series: [
            {
                type: "bar",
                label: {
                    show: true,
                    position: "top"
                },
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'orange' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'greenyellow' // 100% 处的颜色
                        }],
                    }
                }
            }
        ]
    }
    echartsInstance.setOption(initOptions)
}
async function getData() {
    let { data } = await api('plantingHarvest')
    allData = data
    editEcharts()
}
function editEcharts() {
    let xAxisValue = allData.map(item => item.month)
    let seriesValue = allData.map(item => item.harvest)
    let editOptions = {
        xAxis: {
            data: xAxisValue
        },
        series: [
            {
                data: seriesValue
            }
        ]
    }
    echartsInstance.setOption(editOptions)
}
function Adaptation() {
    let width = vertical.value.offsetWidth;
    let scale = width / 100 * 3.6
    let adapOptions = {
        title: {
            textStyle: {
                fontSize: scale
            }
        },
        series: [
            {
                barWidth: scale,
                itemStyle: {
                    borderRadius: [scale / 2, scale / 2, 0, 0]
                }
            }
        ]
    }
    echartsInstance.setOption(adapOptions)
    echartsInstance.resize()
}

onMounted(() => {
    initEcharts()
    getData()
    window.addEventListener('resize', Adaptation)
    Adaptation()
})
// 暴露导出适配方法(宏命令 不需要引入就可以使用)
defineExpose({
    Adaptation
})

</script>
